<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /**
            js的执行机制是单线程,

            js的任务：同步任务和异步任务

            异步任务：

                宏任务：setTimeout  setInterval（时间到了执行）  event（click）事件触发  ajax  后台响应200

                微任务：promise.then  promise.catch promise.finally

            任务：同步任务，宏任务，微任务


            1>js执行的顺序是从下往下执行，遇到同步的任务，推到同步队列并执行，遇到宏任务，推到宏任务队列不执行，遇到微任务，推到微任务队列，不执行，

            2>执行完同步任务，去微任务队列去跑一遍，执行所有的微任务

            3>执行完微任务，去宏任务队列里取一个宏任务执行


            **注**：new Promise()  立即执行

            **注：**：遇到await跟的是async函数还是promise，执行顺序是从右往左，阻塞await下面的代码执行，放到微任务内，跳出async函数，执行下面的同步代码，

        */

        // for(var i = 0;i<10;i++){
        //     setTimeout(() => {
        //         console.log(i)  //10
        //     },0)
        // }

        // //[set1,set2,set3,....]

        // console.log('end',i)  //end 10

        //======================================

        // setTimeout(() => {
        //     console.log(1);
        // },0)

        // new Promise((resolve,reject) => {
        //     console.log(2);
        //     resolve(3)
        // }).then(res =>{
        //     console.log(res);
        // })

        // console.log(5);

        //=======================================

        // new Promise((resolve) => {
        //     console.log(6);  
        //     resolve();
        // }).then(res =>{
        //     console.log(7);
        // })

        // async function first(){
        //     console.log(1); 
        //     await second();
        //     console.log(2);
        // }

        // setTimeout(function(){
        //     console.log(4)
        // })

        // console.log(5); 

        // first();

        // console.log(8);

        // async function second(){
        //     console.log(3)
        // }    

        //==============================================


        async function async1() {
            console.log('async1 start');
            await async2();
            console.log('async1 end');
        }
        async function async2() {
            console.log('async2');
        }

        console.log('script start');

        setTimeout(() => {
            console.log('setTimeout');
            new Promise((resolve) => {
                console.log("set2");
                resolve(5)
            }).then(res => {
                console.log(res)
            })
        },0)

        //调用async1
        async1();
        
        new Promise((resolve) => {
            console.log('promise1');
            resolve();
        }).then(() => {
            console.log('promise2')
        })

        console.log('script end')

    </script>
</body>
</html>